<template>
  <el-aside class="bighe">
    <dl class="dataa">
      <dt class="scrat" v-text="Catebag.name"></dt>
      <dd
        v-for="(v, i) in Course"
        :key="`1listhe${i}`"
        :class="getuserUserCourse.find(user=> user.course_ID ==v.ID )?null:bgddis"
      >
        <router-link
          :to="{ name: v.iframeid?'scratch':'sections', params:{ cid: v.ID, num: 1 } }"
          v-text="v.name"
          v-if="getuserUserCourse.find(user=> user.course_ID ==v.ID )"
        ></router-link>
        <el-button v-else type="text" disabled v-text="v.name"></el-button>
      </dd>
    </dl>
  </el-aside>
</template>
<script>
import { mapGetters } from "vuex";
import _ from "underscore";
export default {
  name: "listhe",
  props: ["cid"],
  data() {
    return {
      Catebag: {},
      Course: [],
      bgddis: "bgddis"
    };
  },
  watch: {
    cid() {
      this.start();
    }
  },
  computed: mapGetters([
    "getCatebag",
    "getCourse",
    "getuserUserCourse",
    "getCoursecatebag"
  ]),
  mounted() {
    this.start();
  },
  methods: {
    start() {
      // 临时处理
      const data = this.getCoursecatebag.find(v => v.cid == this.cid);
      const data2 = _.filter(
        this.getCoursecatebag,
        v => v.catebagid == data.catebagid
      );
      this.Course = _.filter(this.getCourse, v => {
        return data2.find(vo => v.ID == vo.cid);
      });
    }
  }
};
</script>


<style scoped>
.bighe {
  background: #f5f7fa;
}
.dataa {
  width: 240px;
  margin-bottom: 0px;
  margin-left: 32px;
}
.scrat {
  margin-bottom: 38px;
  height: 17px;
  font-family: MicrosoftYaHei;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 1px;
  color: #444444;
}
dd {
  font-family: MicrosoftYaHei;
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 1px;
}
dd .router-link-active {
  cursor: default;
  color: rgb(47, 129, 241);
}
dd a {
  width: 175px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  color: #444444;
}
.bighe .el-button {
  width: 175px;
  padding: 0;
  border-width: 0px;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}
.bgddis {
  background-image: url(https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/%E6%9C%AA%E8%A7%A3%E9%94%81.png);
  background-position-y: top;
  background-position-x: right;
  background-repeat: no-repeat;
}
</style>